<template>
  <view class="p-12">
    <!-- 搜索栏 -->
    <view class="flex justify-between items-center">
      <view class="flex-1 flex items-center px-12 bg-gray-100 rounded-full">
        <uni-icons type="search" size="32rpx" />
        <view class="flex-1">
          <uni-easyinput
            v-model="searchValue"
            type="text"
            :inputBorder="false"
            placeholderStyle="color: #999;"
            :styles="{ backgroundColor: '#f6f3f4' }"
            placeholder="请输入关键字"
            @confirm="onSearch"
          />
        </view>
      </view>
      <view class="px-12" @click="onSearch">搜索</view>
    </view>
    <view class="mt-20">
      <view class="text-base font-bold">大家都在搜</view>
      <view class="grid grid-cols-2 gap-x-20 mt-8">
        <view v-for="(text, index) in hotSearchList" :key="index" class="py-8" @click="handleHot(text)">
          <text>{{ index + 1 }}</text>
          <text class="ml-10 mr-5">{{ text }}</text>
          <uni-icons v-if="index < 3" type="fire-filled" color="#f7573b" size="18" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getHotSearchApi } from '@/api/contract';
import { debounce } from '@/utils/utils';

const searchValue = ref('');
const hotSearchList = ref([]);

onLoad(async () => {
  const { code, data } = await getHotSearchApi();
  if (code === 200) {
    hotSearchList.value = data;
  }
});
function handleHot(text) {
  searchValue.value = text;
  onSearch();
}
const onSearch = debounce(function () {
  if (!searchValue.value) {
    uni.showToast({
      title: '请输入关键字',
      icon: 'none',
    });
    return;
  }
  uni.navigateTo({
    url: `/pages/search/result?keyword=${searchValue.value}`,
  });
});
</script>
